<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			.main{
				width: 1200px;
				height: 800px;
				border: 1px solid red;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				/* align-items: center; */
				/* align-content: center; */
				/* align-items: flex-end ;*/
				align-content: flex-end;
			}
			.main>div{
				width: 300px;
				height: 100px;
				border: 1px solid blue;
			}
			.f{
				width: 300px;
				height: 100px;
				display: flex;
				border: 1px solid red;
				justify-content:  space-around;
				overflow: auto;
			}
			.f>div{
				min-width: 100px;//在flex容器中如果子元素没有设置换行,但是又想保持自身得宽度不被其他子元素压缩就设置min-width
				height: 100px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>
		
		<div class="main">
			<div>
				
			</div>
			<div>
				
			</div>
			<div>
				
			</div>
			<div>
				
			</div>
			<div>
				
			</div>
			<div>
				
			</div>
		</div>
	
	
	<div class="f">
		<div></div>
		<div></div>
		<!-- <div></div>
		<div></div>
		<div></div>
		<div></div> -->
	</div>
	</body>
</html>
